<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar>
      <template #left>
        <span class="iconfont iconnew indexIconNew"></span>
      </template>
      <template #title>
        <div class="search">
          <van-icon name="search" color="#fff" size="18" />
          <span>搜索商品</span>
        </div>
      </template>
      <template #right>
        <van-icon name="manager-o" size="25" color="#fff" />
      </template>
    </van-nav-bar>
    <!-- 内容 -->
    <!-- 导航 -->
    <van-tabs>
      <van-tab v-for="item in categoryList" :title="item.name" :key="item.id">
        <!-- 
        上拉加载组件list
        v-model：绑定的变量表示当前数据是否加载完成，false表示加载完成，true表示没有加载完成
        finished：表示是否已经加载完所有数据（也就是数据库中的数据全部加载完了），true表示加载完了
        finished-text：设置加载完所有数据后的提示内容
        load：表示加载中触发的事件
         -->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          offset="100"
          :immediate-check="false"
        >
          <!-- 
        下拉刷新组件pull-refresh
        v-model：绑定的变量表示，是否刷新完成
        refresh：表示下拉刷新时会触发的一个事件
          -->
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <!-- 新闻列表 -->
            <newsItem
              v-for="item in newsList"
              :news="item"
              :key="item.id"
            ></newsItem>
          </van-pull-refresh>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import newsItem from "@/components/newsItem.vue";
import { category } from "@/api/common.js";
import { getNewsList } from "@/api/news.js";
export default {
  components: { newsItem },
  data() {
    return {
      categoryList: [],
      curIndex: 1, // 表示当前栏目的下标值
      newsList: [], // 新闻列表
      isLoading: false, // 控制是否下拉刷新完成
      pageIndex: 1, // 当前页数
      pageSize: 10, // 每页的数据数量，在这里是不需要改变的
      loading: false, // 表示是否加载完成
      finished: false, // 表示是否把所有数据加载完
    };
  },
  created() {
    // 获取栏目列表并保存
    category().then((res) => {
      // console.log(36,res);
      this.categoryList = res.data.data;
      // 获取新闻列表（根据栏目id获取新闻列表）
      this.getNews();
    });
  },
  methods: {
    // 上拉加载会触发的函数
    onLoad() {
      this.pageIndex++;
      this.getNews();
    },
    // 下拉刷新时会触发的函数
    onRefresh() {
      // 解决key值(数据)重复问题
      this.newsList = [];
      // 解决刷新获取到非第一页数据问题
      this.pageIndex = 1;
      //解决上拉加载完成后finished变为true后，重新下拉刷新
      finished: false;
      // 刷新功能，就是重新获取一下新闻列表数据即可
      setTimeout(() => {
        this.$toast.success("刷新成功");
        this.$toast.fail("刷新成功");
        this.getNews();
      }, 100);
    },
    // 获取新闻列表函数
    getNews() {
      getNewsList({
        category: this.categoryList[this.curIndex].id,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      }).then((res) => {
        // console.log(51,res);
        this.newsList = [...this.newsList, ...res.data.data];
        // 数据成功请求回来后需要把isLoading改为false
        this.isLoading = false;
        // 数据请求后下拉加载的loading改为false
        this.loading = false;
        // 当所有数据加载完成后把finished为true
        // 如何判断所有数据已经加载完成：
        // 当请求回来的数据量少于我们请求的数据量的时候，就说明已经没有更多数据了
        if (res.data.data.length < this.pageSize) {
          this.finished = true;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar {
  background-color: #ff0000;
  .indexIconNew {
    font-size: 50px;
    color: white;
  }
  .van-nav-bar__title {
    width: 60%;
    .search {
      width: 100%;
      height: 38px;
      background-color: rgba(255, 255, 255, 0.4);
      border-radius: 20px;
      text-align: center;
      line-height: 38px;
      color: #fff;
      span {
        margin-left: 5px;
      }
    }
  }
}
</style>